<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
      /* Logo */
      .dark-logo {
           height: 23px;
           position: absolute; 
           left: 0;
           top: 23px;
        }
        ul {
            list-style: none;
        } 
        /* 导航栏的 */
        .daohang {
            width: 100%; 
            display: flex; 
            text-align: center;
            height: 80px;
            line-height: 80px;
        }
        .ul {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .left { 
            width: 28%;
        } 
        .right {
            width: 72%;
        }
        .rig{
            width: 70%;
            text-align: center; 
        }
        /* 轮播图 */
        .lunbo{
            position: absolute; 
            width: 100%;
            height: 700px; 
        }
        img{
             position:absolute;
             display: none;
             width: 100%; 
             top: 0;
             left: 0;
      }
      /* 轮播图里的小圆点 */
      .yuandian{
        position: absolute;
        left: 50%; 
        top: 550px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 80px;
        height: 50px;
      }
    .yuandian li{
        width: 10px;
        height: 10px;
        background-color: white;
        border-radius: 50%;
    }
    .ul li:hover{
        color: chocolate;
    }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>  
            <!-- 导航 -->
            <div class="daohang">
                <div class="left">
                     <!-- Logo开始 -->
            <svg viewBox="0 0 415 67" class="dark-logo">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#oppo-logo-common">
                    <svg id="oppo-logo-common" viewBox="0 0 415 67">
                        <g id="oppoLogo" stroke="none" stroke-width="1" fill-rule="evenodd">
                            <g id="LOGO1" fill-rule="nonzero">
                                <path
                                    d="M33.7265527,0.00470449892 L32.8750384,0.00470449892 C13.5160254,0.319905926 1.42108547e-14,10.7733025 1.42108547e-14,25.4089987 C1.42108547e-14,40.0446948 13.5160254,50.5122049 32.870334,50.8132929 L33.7265527,50.8132929 C53.0808614,50.5027959 66.5968868,40.0493995 66.5968868,25.4089987 C66.5968868,10.768598 53.0808614,0.305792431 33.7265527,0.00470449892 M33.3031479,42.5568974 C19.1614241,42.4063534 10.0252872,35.6789199 10.0252872,25.4231122 C10.0252872,15.1673045 19.1614241,8.43516658 33.3031479,8.28932711 C47.4542807,8.43516658 56.5904176,15.1626001 56.5904176,25.4231122 C56.5904176,35.6836243 47.4542807,42.4063534 33.3125569,42.5568974"
                                    id="形状"></path>
                                <path
                                    d="M247.776549,0.00470449892 L246.925035,0.00470449892 C227.566022,0.319905926 214.049997,10.7733025 214.049997,25.4089987 C214.049997,40.0446948 227.566022,50.5122049 246.920331,50.8132929 L247.776549,50.8132929 C267.130858,50.5027959 280.646883,40.0493995 280.646883,25.4089987 C280.646883,10.768598 267.130858,0.305792431 247.776549,0.00470449892 M247.353144,42.5568974 C233.211421,42.4063534 224.075284,35.6789199 224.075284,25.4231122 C224.075284,15.1673045 233.211421,8.43516658 247.353144,8.28932711 C261.504277,8.43516658 270.640413,15.1626001 270.640413,25.4231122 C270.640413,35.6836243 261.504277,42.4063534 247.362553,42.5568974"
                                    id="形状"></path>
                                <path
                                    d="M176.573958,0.00470449892 L175.717739,0.00470449892 C166.496921,0.155248465 158.602772,2.6062924 152.863284,6.71802446 L152.863284,2.38518095 L142.842701,2.38518095 L142.842701,66.7192037 L152.863284,66.7192037 L152.863284,44.1376089 C158.602772,48.2446364 166.50633,50.7239075 175.713035,50.8462244 L176.573958,50.8462244 C195.928267,50.5357274 209.444292,40.082331 209.444292,25.4419302 C209.444292,10.8015295 195.928267,0.338723924 176.573958,0.0376359914 M176.145849,42.5898289 C162.004125,42.4392849 152.867988,35.7118514 152.867988,25.4560437 C152.867988,15.200236 162.004125,8.46809806 176.145849,8.32225859 C190.292277,8.46809806 199.433118,15.1955315 199.433118,25.4560437 C199.433118,35.7165557 190.292277,42.4392849 176.150553,42.5898289"
                                    id="形状"></path>
                                <path
                                    d="M105.145551,0.00470449892 L104.294037,0.00470449892 C95.0732187,0.155248465 87.1790695,2.6062924 81.4348765,6.71802446 L81.4348765,2.38518095 L71.4189981,2.38518095 L71.4189981,66.7192037 L81.4348765,66.7192037 L81.4348765,44.1376089 C87.1743651,48.2446364 95.0779234,50.7239075 104.289332,50.8462244 L105.150255,50.8462244 C124.504564,50.5357274 138.020589,40.082331 138.020589,25.4419302 C138.020589,10.8015295 124.504564,0.338723924 105.145551,0.0376359914 M104.722146,42.5898289 C90.5804222,42.4392849 81.4395809,35.7118514 81.4395809,25.4560437 C81.4395809,15.200236 90.5804222,8.46809806 104.722146,8.32225859 C118.868574,8.46809806 128.004711,15.1955315 128.004711,25.4560437 C128.004711,35.7165557 118.868574,42.4392849 104.726851,42.5898289"
                                    id="形状"></path>
                            </g>
                        </g>
                    </svg>
                </use>
            </svg> 
                </div>
                 <!-- Logo结束 --> 


                 <!-- 导航栏 -->
                <div class="right">
                    <!-- 导航栏小盒子 -->
                    <div class="rig">
                        <ul class="ul">
                            <li>
                                <a>手机</a>
                            </li>
                            <li>
                                <a>智能硬件</a>
                            </li>
                            <li>
                                <a>欢太商城</a>
                            </li>
                            <li>
                                <a>关于 OPPO</a>
                            </li>
                            <li>
                                <a>ColorOS</a>
                            </li>
                            <li>
                                <a>服务</a>
                            </li>
                            <li>
                                <a>企业业务</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>  
    </header>


     <!-- 轮播图 -->
     <div class="lunbo" >
        <div class="banner">
            <img style="display: block;" src="./imgs/1.jpg" alt="">
            <img src="./imgs/2.jpg" alt="">
            <img src="./imgs/3.jpg" alt="">  
        </div> 
        <ul class="yuandian">
            <li style="background-color:gray ;"  onclick="qh(0)"></li>
            <li  onclick="qh(1)"></li>
            <li  onclick="qh(2)"></li>
        </ul>
         
    </div>
</body>
<script>
   var banner = document.querySelector('.banner'); //轮播图
   var lis = document.querySelectorAll('.yuandian li');  //点
   var img = document.querySelectorAll('img');  //点
   var tiem=1
   var  a=setInterval(()=>{
        tiem++
       
        for(var i=0;i<=lis.lenght-1;i++){
            lis[i].style.backgroundColor="white" 
            img[i].style.display="none"
        } 
        
        lis[tiem-1].style.backgroundColor="gray"
        img[tiem-1].style.display="block"

        if(tiem==3){
            tiem=0
        }
        console.log(tiem);
    },3000)


    // 小圆点的点击
    function qh(index){
        tiem=index
        // 小圆点的遍历image.png
        lis.forEach(item=>{
            item.style.backgroundColor="white"
        })
        lis[index].style.backgroundColor="gray"
        // 图片的遍历
        img.forEach(item=>{
            item.style.display="none"
        })
        img[index].style.display="block"
    }
</script>
</html>